<template>
    <div id="top">


        <div id="popup">
            <div class="mask">
                <span>净含量在</span>
                <div class="mask-div" ref="title">
                    <div ref="tit" @click="click($event,'全部')">全部</div>
                    <div ref="tit" @click="click($event,'251~500')">251-500克</div>
                    <div ref="tit" @click="click($event,'501~1000')">501-1000克</div>
                    <div ref="tit" @click="click($event,'1000~2000')">1000克以上</div>
                    <div ref="tit" @click="click($event,'0~50')">50克以下</div>
                </div>
            </div>
            <div class="mask">
                <span>等级</span>
                <div class="mask-div" ref="title1">
                    <div @click="click1($event,'全部')">全部</div>
                    <div @click="click1($event,'一级')">一级</div>
                    <div @click="click1($event,'二级')">二级</div>
                    <div @click="click1($event,'其他')">其他</div>
                    <div @click="click1($event,'特级')">特级</div>
                </div>
            </div>
            <div class="mask">
                <span>年份</span>
                <div class="mask-div" ref="title2">
                    <div @click="click2($event,'全部')">全部</div>
                    <div @click="click2($event,'2005')">2005年以前</div>
                    <div @click="click2($event,'2014')">2014年</div>
                    <div @click="click2($event,'2015')">2015年</div>
                    <div @click="click2($event,'2016')">2016年</div>
                </div>
            </div>


        </div>
        <div id="bottom">
            <button @click="reset">重置</button>
            <button @click="sure">确定</button>
        </div>
    </div>
    

</template>

<script>
    export default {
        data:function(){
            return{
                Popup:{
                    weight:null,
                    level:null,
                    year:null
                }
            }
        },
        methods: {
            sure: function () {
                this.$emit("pagechange",this.Popup);
                
            },
            reset: function () {
                var data = this.$refs.title.children;
                var data1 = this.$refs.title1.children;
                var data2 = this.$refs.title2.children;
                for (var i = 0; i < data.length; i++) {
                    data[i].style.border = "solid 1px #dedede"
                };
                for (var i = 0; i < data1.length; i++) {
                    data1[i].style.border = "solid 1px #dedede"
                };
                for (var i = 0; i < data1.length; i++) {
                    data2[i].style.border = "solid 1px #dedede"
                }
                data[0].style.border = "solid 1px #EE4000";
                data1[0].style.border = "solid 1px #EE4000";
                data2[0].style.border = "solid 1px #EE4000";
            },
            click: function (e,w) {
                if(w=="全部"){
                    this.Popup.weight = null
                }else{
                    this.Popup.weight = w;
                }
                var data = this.$refs.title.children;
                for (var i = 0; i < data.length; i++) {
                    data[i].style.border = "solid 1px #dedede"
                }
                e.target.style.border = "solid 1px #EE4000";
            },
            click1: function (e,w) {
                if(w=="全部"){
                    this.Popup.level = null
                }else{
                    this.Popup.level = w;
                }
                var data1 = this.$refs.title1.children;
                for (var i = 0; i < data1.length; i++) {
                    data1[i].style.border = "solid 1px #dedede"
                }
                e.target.style.border = "solid 1px #EE4000";
            },
            click2: function (e,w) {
                if(w=="全部"){
                    this.Popup.year = null
                }else{
                    this.Popup.year = w;
                }
                var data2 = this.$refs.title2.children;
                for (var i = 0; i < data2.length; i++) {
                    data2[i].style.border = "solid 1px #dedede"
                }
                e.target.style.border = "solid 1px #EE4000";
            }
        },
        mounted: function () {
            this.reset();
        }
    }

</script>

<style scoped>
    #top {
        position: absolute;
        bottom: 0;
        height: 60vh;
        width: 100vw;
        
        background-color: white;
    }

    #popup {
        height: calc(60vh - 8vh);
        overflow-y: scroll;
    }

    .mask {
        font-size: 4vw;
        padding-top: 2vh;
        padding-left: 3vw;
        padding-bottom: 2vh;
        border-bottom: 1px solid #dedede;
    }

    .mask span {
        position: relative;
        left: 2vw;
    }

    .mask-div {
        display: flex;
        flex-wrap: wrap;
        border: none !important;
    }

    .mask-div div {
        border: solid 1px #dedede;
        font-size: 3.5vw;
        width: 90px;
        height: 30px;
        margin: 5px 5px;
        text-align: center;
        line-height: 30px;
    }

    #bottom {
        position: fixed;
        bottom: 0;
        z-index: 100;
        display: flex;
    }

    #bottom button:nth-of-type(1) {
        width: 49.5vw;
        height: 8vh;
        border: none;
        color: #EE4000;
        background-color: white;
    }

    #bottom button:nth-of-type(2) {
        width: 49.5vw;
        height: 8vh;
        border: none;
        background-color: #EE4000;
        color: white;
    }
</style>